import React, { Component } from 'react';
import { Collapse } from '@alifd/next';
import FoundationSymbol from '@icedesign/foundation-symbol';
import OperatBasicInfo from './OperatBasicInfo';

const Panel = Collapse.Panel;


const Data = [
    {
        title: '基本信息',
        editBasicInfo: false,
        openCollapse: true,
        key: "0",
    },
    {
        title: '配置信息',
        editBasicInfo: false,
        openCollapse: false,
        key: "1",
    },
];

export default class TabBasicInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            expandedKeys: ["0"],
            panelData: Data,
        }
    }

    componentWillReceiveProps(nextProps) {
        const {basicDetail} = this.props;
        if (!basicDetail || !basicDetail.data) {
            return false;
        }
        let _itemApplyCode = basicDetail && basicDetail.data && basicDetail.data.itemApplyCode
        if (nextProps.basicDetail.data.itemApplyCode !== _itemApplyCode) {
            this.reductionPanel()
        }
    }

    renderPanelExtra = (panelObj) => {
        return (
            <div className="panel-extra">
                {panelObj.title}
                {
                    panelObj.openCollapse ? (
                        <div className="collapse-btn" onClick={this.onEditBasicInfo}>
                            <FoundationSymbol size="small" type={'edit'} />
                            <span>编辑</span>
                        </div>
                    ) : ""
                }
            </div>
        )
    }

    onEditBasicInfo = (event) => {
        event.stopPropagation();
        const { panelData, expandedKeys } = this.state;
        let _data = panelData.map(item => {
            if (item.key === expandedKeys[0]) {
                return {
                    ...item,
                    editBasicInfo: !item.editBasicInfo,
                    openCollapse: true
                }
            } else {
                return {
                    ...item,
                    openCollapse: false,
                    editBasicInfo: false,
                }
            }
        })
        this.setState({
            panelData: _data,
        })
    }

    onPanelClick = (key) => {
        console.log('key===',key);
        const {panelData} = this.state;
        let _panelData = panelData.map(item => {
            if (item.key === key) {
                return {
                    ...item,
                    openCollapse: !item.openCollapse,
                    editBasicInfo: false,
                }
            } else {
                return {
                    ...item,
                    openCollapse: false,
                    editBasicInfo: false,
                }
            }
        })
        this.setState({
            panelData: _panelData,
            expandedKeys: key,
        })
    }

    reductionPanel = () => {
        const { panelData, expandedKeys } = this.state;
        let _data = panelData.map(item => {
            if (item.key === expandedKeys[0]) {
                return {
                    ...item,
                    editBasicInfo: false,
                    openCollapse: true
                }
            } else {
                return {
                    ...item,
                    openCollapse: false,
                    editBasicInfo: false,
                }
            }
        })
        this.setState({
            panelData: _data,
        })
    }

    render() {
        const { panelData } = this.state;

        return (
            <div style={{padding: '0 20px'}}>
                <Collapse accordion onExpand={this.onExpand} defaultExpandedKeys={["0"]}>
                    {
                        panelData.map((item) => {
                            let PanelComponent;
                            if (item.key === "0") {
                                PanelComponent = (<OperatBasicInfo 
                                     editBasicInfo={item.editBasicInfo} 
                                     hideEdit={this.onEditBasicInfo} 
                                     reductionPanel={this.reductionPanel}
                                     {...this.props} />)
                            } else if (item.key === "1") {
                                PanelComponent = (<div style={{height: '100px',color: '#666',fontSize: '15px',textAlign:'center'}}>配置信息</div>)
                            }
                            return (
                                <Panel title={this.renderPanelExtra(item)} key={item.key} onClick={this.onPanelClick}>
                                    {PanelComponent}
                                </Panel>
                            )
                        })
                    }
                </Collapse>
            </div>
        )
    }
}